<template>
    <div class="address-list">
        <h2>收件人地址列表</h2>
        <el-table :data="addressList" style="width: 100%">
            <el-table-column label="序号" prop="serialNumber"></el-table-column>
            <el-table-column label="收件人" prop="consignee"></el-table-column>
            <el-table-column label="联系电话" prop="consigneePhone"></el-table-column>
            <el-table-column label="省" prop="consigneeProvince" show-overflow-tooltip></el-table-column>
            <el-table-column label="市" prop="consigneeCity" show-overflow-tooltip></el-table-column>
            <el-table-column label="区" prop="consigneeDistrict" show-overflow-tooltip></el-table-column>
            <el-table-column label="具体地址" prop="consigneeDetialedAddress" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                    <el-button type="text" @click="editAddress(scope)">编辑</el-button>
                    <el-button type="text" @click="deleteAddress(scope)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="编辑地址" :visible.sync="editDialogVisible">
            <el-form :model="editForm" ref="editForm" :rules="editRules" label-width="80px">
                <el-form-item label="收件人姓名" prop="name">
                    <el-input v-model="editForm.name" placeholder="请输入收件人姓名"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="editForm.phone" placeholder="请输入联系电话"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="editForm.address" placeholder="请输入地址"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveAddress">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import axios from "axios";

export default {
    mounted() {
        this.search()
    },
    data() {
        return {
            addressList: [
                {name: '张三', phone: '13812345678', address: '北京市朝阳区'},
                {name: '李四', phone: '13987654321', address: '上海市徐汇区'},
                {name: '王五', phone: '13655556666', address: '广州市天河区'}
            ],
            editDialogVisible: false,
            editForm: {
                name: '',
                phone: '',
                address: ''
            },
            editRules: {
                name: [
                    {required: true, message: '请输入收件人姓名', trigger: 'blur'}
                ],
                phone: [
                    {required: true, message: '请输入联系电话', trigger: 'blur'},
                    {pattern: /^1[3456789]\d{9}$/, message: '联系电话格式不正确', trigger: 'blur'}
                ],
                address: [
                    {required: true, message: '请输入地址', trigger: 'blur'}
                ]
            }
        }
    },
    methods: {

        editAddress(scope) {
            this.editForm = Object.assign({}, this.addressList[index]);
            this.editDialogVisible = true;
        },
        deleteAddress(scope) {
            console.log(scope.row.serialNumber)
            axios({
                method: 'delete',
                url: '/addresses/' + scope.row.serialNumber,
                headers: {
                    "token": window.sessionStorage.getItem("token")
                }
            }).then((res) => {
                console.log(res)
            })
        },
        saveAddress() {
            this.$refs.editForm.validate(valid => {
                if (valid) {
                    // 表单验证通过，保存地址
                    if (this.editForm.__index__ !== undefined) {
                        // 编辑地址
                        this.addressList.splice(this.editForm.__index__, 1, this.editForm);
                    } else {
                        // 新增地址
                        this.addressList.push(this.editForm);
                    }
                    this.editDialogVisible = false;
                } else {
                    // 表单验证失败，做相应处理
                }
            });
        },
        search() {
            axios({
                method: 'get',
                //老亓写错了，应该是get，后端写成post了
                url: '/addresses',
                headers: {
                    "token": window.sessionStorage.getItem("token")
                }
            }).then((res) => {
                console.log(res)
                this.addressList = res.data.data
            })
        }
    }
}
</script>

<style scoped>
.address-list {
    max-width: 600px;
    margin: 0 auto;
}
</style>